<template>
  <div class="breadcrumb">
    <el-card class="box-card" shadow="hover">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item v-for="item in items" :key="item.name">
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <el-select v-if="value" v-model="value" placeholder="请选择应用" size="mini" @change="handleChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-card>
  </div>
</template>
<script>
import {appListApi} from "@/api/manage";

export default {
  data() {
    return {
      items: [],
      value: null,
      options: null,
    };
  },
  watch: {
    $route() {
      this.loadData();
    }
  },
  methods: {
    goPage(appName) {
      this.$router.push({
        name: this.$router.currentRoute.name,
        query: {
          appName: appName
        },
      });
    },
    handleChange() {
      this.goPage(this.value);
    },
    loadData() {
      this.items = [];
      let matchedRoutes = this.$router.currentRoute.matched;
      for (let i = 0; i < matchedRoutes.length; i++) {
        let meta = matchedRoutes[i].meta;
        if (meta.title) {
          this.items.push({
            name: meta.title,
          });
        }
      }
      this.value = null;
      if (this.$route.meta.appSwitch) {
        this.value = [];
        if (this.$route.query.appName) {
          this.value = this.$route.query.appName;
          sessionStorage.setItem("breadcrumb_curr_app", this.value);
        } else {
          let currApp = sessionStorage.getItem("breadcrumb_curr_app");
          if (currApp) {
            this.goPage(currApp);
          } else if (this.options.length > 0) {
            this.goPage(this.options[0].value);
          }
        }
      }
    },
  },
  async created() {
    this.options = [];
    let appList = await appListApi();
    for (let i = 0; i < appList.length; i++) {
      this.options.push({
        value: appList[i].appName,
        label: appList[i].appShowName,
      });
    }
    this.loadData();
  },
};
</script>
<style scoped>
.breadcrumb /deep/ .el-breadcrumb {
  line-height: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
}

.breadcrumb /deep/ .el-select {
  line-height: 28px;
  height: 28px;
  display: inline-end;
  vertical-align: middle;
  width: 250px;
  float: right;
}

.breadcrumb /deep/ .el-card {
  background: #f2f6fc;
  color: #409eff;
  padding: 5px;
}

.breadcrumb /deep/ .el-card .el-card__body {
  padding: 0px;
}

.breadcrumb /deep/ .el-card .el-breadcrumb__inner {
  color: #303133;
}
</style>